<style>

	.cities {width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.city { text-align: center;}
	.periods { width: 100%; height: 32px; margin-top: 15px; }
	.periodsleft { width: 340px; margin-left: 10px; border-right: 1px solid #cccccc;}
	.periodsleft .item { width: 50px;}
	.periodsright { margin-left: 10px;}
	.periodsright input { width: 130px; height: 28px; background: none; border: none; border-bottom: solid 1px #cccccc; text-indent: 4px; }
	.begin2end { font-size: 14px;}
	.time { font-size: 12px; font-weight: bold; margin-left: 15px; cursor: pointer; }
	.time:hover { color: red;}
	.time.choosed { color: darkorange;}
	.memo { font-size: 10px; }
	
</style>
<section>
	<div class="" id="vm">
		<h3 class="pagetitle">快快门店签约情况</h3>
		<div class="cities line">
			<div class="city item" v-for="(item, i) in cities" :class="item == city ? 'choosed' : ''" @click="choosecity(item)">{{item}}</div>
		</div>
		<div class="periods line">
			<div class="periodsleft line">
				<div class="period item" v-for="item in periods" :class="period == item ? 'choosed' : ''" @click="chooseperiod(item)">{{item}}</div>
			</div>
			<div class="periodsright line">
				<div class="begin2end" v-if="period == '自定义'">自<input type="date" v-model="begindate">至<input type="date" v-model="enddate"><button @click="showtable()">查询</button></div>
				<div class="begin2end" v-else-if="period != '每日'">自 {{begindate}} 至 {{enddate}}</div>
				<div class="time" v-if="period != '自定义' && period != '累计'" v-for="(val, i) in times" :class="curtime == i ? 'choosed' : ''" @click="choosetime(i)">{{val.desc}}</div>
			</div>
		</div>
		<v-table style="width: 100%;  margin-top: 2px;" 
			:height="700"  
			is-horizontal-resize
			:is-loading="isLoading" 
			:columns="columns"
			:table-data="signup" 
			row-hover-color="#fff" 
			sort-always>
		</v-table>
		<div class="line" style="justify-content: space-between; height: 40px;">
			<div class="download"><button @click="download()">导出</button></div>
			<div class="memo">注：所有数据均截止到昨日。</div> 
		</div>
	</div>
</section>
<script>
	var vm = new Vue({
		el: "#vm",
		data: {
			periods: ['每日', '每周', '每月', '每年', '累计', '自定义'],
			period: '每日',
			times: [], // 时间需倒排, 最前面的即为最晚的时间, 并由此计算出 begindate 和 enddate
			curtime: 0, 
			cities: [],
			city: C.city,
			begindate: rd.dateAdd(new Date(), -1),
			enddate: rd.dateAdd(new Date(), 0),
			columns: [
				{field: "city", title: "城市", width: 60, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true},
				{field: "gymname", title: "门店", width: 200, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true},
				{field: "tc", title: "体验课签约数", width: 120, titleAlign: 'center', columnAlign:'center', isResize: true},
				{field: "tf", title: "体验课现金收入", width: 120, titleAlign: 'center', columnAlign:'center', isResize: true, formatter: function(d){return rd.formatMoney(Math.round(d.tf))}},
				{field: "tvf", title: "体验课收入（含V）", width: 130, titleAlign: 'center', columnAlign:'center', isResize: true, formatter: function(d){return rd.formatMoney(Math.round(d.tvf))}},
				{field: "zc", title: "正式课签约数", width: 100, titleAlign: 'center', columnAlign:'center', isResize: true},
				{field: "zf", title: "正式课现金收入", width: 120, titleAlign: 'center', columnAlign:'center', isResize: true, formatter: function(d){return rd.formatMoney(Math.round(d.zf))}},
				{field: "zvf", title: "正式课收入（含V）", width: 130, titleAlign: 'center', columnAlign:'center', isResize: true, formatter: function(d){return rd.formatMoney(Math.round(d.zvf))}},
				{field: "cl", title: "购课节数", width: 100, titleAlign: 'center', columnAlign:'center', isResize: true},
				{field: "cc", title: "开课场次数", width: 100, titleAlign: 'center', columnAlign:'center', isResize: true},
				{field: "hcl", title: "上课总人数", width: 100, titleAlign: 'center', columnAlign:'center', isResize: true},
			],
			signup: [],   
			isLoading: false,
		},
		methods: {
			showtable: function(){
				let that = this;
				this.isLoading = true;
				let params = {
					"city": this.city,
					"begindate": this.begindate,
					"enddate": this.enddate
				}
				post(dataDomain + "data/post.php/ksap/gyms/signup", params, function(r){
					console.log(r);
					if(r.status == 1){
						that.signup = r.data;
						that.isLoading = false;
					}
				})
			},
			choosecity: function(i){
				this.city = i;
				this.showtable();
			},
			chooseperiod: function(i){
				this.period = i;
				this.curtime = 0;
				if(i == '每日'){
					this.times = [];
					for(let j = -1; j >= -7; j--){
						this.times.push({desc: rd.dateAdd(new Date(), j), begin: rd.dateAdd(new Date(), j), end: rd.dateAdd(new Date(), j + 1)})
					}
					this.choosetime(0);
				}
				if(i == '每周'){
					this.times = rd.weeksList(6);
					this.choosetime(0);
				}
				if(i == '每月'){
					this.times = rd.monthsList(6);
					this.choosetime(0);
				}
				if(i == '每年'){
					this.times = rd.yearsList(2015);
					this.choosetime(0);
				}
				if(i == '累计'){
					this.begindate = '2015-01-01';
					this.enddate = rd.dateAdd(new Date(), -1);
					this.showtable()
				}
			},
			choosetime(i){
				this.curtime = i;
				this.begindate = this.times[i].begin;
				this.enddate = this.times[i].end;
				this.showtable();
			},
			download(){
				download(this.city + this.period + '签约情况统计表-', this.columns, this.signup);
			}
		},
		mounted: function(){
			let that = this;
			
			post(dataDomain + "data/post.php/ksap/gyms/gyms", {}, function(r){
				console.log(r)
				that.gymsdatas = r.data;
				that.cities = rd.distinctArray(r.data, 'city');
				that.cities.unshift('全部')
			})
			this.chooseperiod(this.period);
			
		}
	})
</script>